
body
  font-family: $body-font-family
  font-size: $font-size-root
  font-weight: $font-weights.regular
  line-height: $line-height-root
h1
  font-size: 48px
  font-weight: $font-weights.thin
  letter-spacing: -1.5

h2
  font-size: 36px
  font-weight: $font-weights.light
  letter-spacing: -0.5

h3 
  font-size: 24px
  font-weight: $font-weights.light
  letter-spacing: normal

h4 
  font-size: 20px
  font-weight: $font-weights.light
  letter-spacing: normal  
h5 
  font-size: 16px
  font-weight: $font-weights.regular
  letter-spacing: normal  


/*------------------------------------------------------------------
[Components List]
*/
.v-list
  .v-list__tile--link:hover,
  .v-list__tile--highlighted,
  .v-list__group__header:hover
  .v-list__group--active:before,
  .v-list__group--active:after
    background: #f5f5f5!important

/*------------------------------------------------------------------
[Components / Card]
*/  
.v-card
  // box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
  &__actions 
    .v-btn 
      margin: 0 8px;
      min-width: 56px
      &:first-child
        margin-left: 0
  
/*------------------------------------------------------------------
[Components / Timeline]
*/    

.timeline
  position: relative;
  list-style: none;
  padding-left: 0;
  z-index: 1

  &-block
    display: -webkit-box;
    display: flex

  &-detail 
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    padding-bottom: 30px
    @media $display-breakpoints.sm-and-down
      display: none;

  &-point 
    position: relative;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -webkit-box-ordinal-group: 3;
    order: 2;
    width: 96px;
    padding-bottom: 30px;
    text-align: center

  &-point::before
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    bottom: -9px;
    width: 1px;
    margin-left: -1px;
    z-index: -1;
    background-color: #ebebeb;
   & &-block:last-child &-point::before
    bottom: 0 !important;

  & &-block:first-child &-point::after
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%

  & &-block:last-child &-point::after
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%

  &-content 
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    margin-bottom: 60px

  &-period
    position: relative;
    padding: 30px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 300;

  &-period::after
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #ebebeb;
    border-radius: 50%

  & &-period:first-child::after
    display: none;

  &-point-xs &-point
    width: 32px
  &-point-sm &-point
    width: 64px      
  &-point-lg &-point
    width: 128px      
  &-point-xl &-point
    width: 256px

  @media $display-breakpoints.md-and-down
    & &-block &-detail 
      -webkit-box-ordinal-group:2;
      order: 1;
    & &-block &-content 
      -webkit-box-ordinal-group: 4;
      order: 3

  @media $display-breakpoints.md-and-up
      & &-block:nth-child(even) &-detail 
        -webkit-box-ordinal-group:2;
        order: 1;
        text-align: right
      
      & &-block:nth-child(even) &-content 
        -webkit-box-ordinal-group: 4;
        order: 3

      & &-block:nth-child(odd) &-detail 
        -webkit-box-ordinal-group: 4;
        order: 3;
        text-align: left  

      & &-block:nth-child(odd) &-content 
        -webkit-box-ordinal-group: 2;
        order: 1
    & &-content-left &-block &-detail
    -webkit-box-ordinal-group: 4;
    order: 3;
    text-align: left
  
  & &-content-left &-block &-content
    -webkit-box-ordinal-group: 2;
    order: 1;

  & &-content-right &-block &-detail
    -webkit-box-ordinal-group: 2;
    order: 1;

  & &-content-right &-block &-content
    -webkit-box-ordinal-group: 4;
    order: 3 ;
  & &-activity &-content
    margin-bottom: 10px
/*------------------------------------------------------------------
[Components / Chat]
*/
.chat
  &-history
    &--toolbar
      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
    &--list
      a.list__tile--active
        background: #eee        
    &--scrollbar
      height:calc(100vh - 48px)             
      @media $display-breakpoints.sm-and-down
        height:calc(100vh - 48px - 56px)  
  &-room
    &--toolbar
      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
    &--scrollbar
      height: calc(100vh - 48px - 80px)         
/*------------------------------------------------------------------
[Components / mail]
*/
.mail
  &-toolbar
    border-bottom: 1px solid rgba(0,0,0,0.12)
  &-list
    &--layout
      padding-top: 64px!important
      @media $display-breakpoints.sm-and-down
        padding-top: 56px!important         
    &--toolbar
      margin-top: 64px!important
      @media $display-breakpoints.sm-and-down
        margin-top: 56px!important      
      .check-all
        flex: 0 0
        margin-top: 0
    &--wrap
      height: calc(100vh - 64px - 64px)
  &-reply
    &--layout
      padding-top: 64px!important
      @media $display-breakpoints.sm-and-down
        padding-top: 56px!important        
    &--toolbar
      margin-top: 64px !important
      @media $display-breakpoints.sm-and-down
        margin-top: 56px!important        
    &--scrollbar
      height: calc(100vh - 64px - 64px)
      @media $display-breakpoints.sm-and-down
        height : calc(100vh - 56px - 56px)      
